<template>
  <div>
    <div>two</div>
    <div id="mountNode" class="canvasStyle"></div>
  </div>
</template>
<script>
import G6 from '@antv/g6'
export default {
  data () {
    return {

    }
  },
  mounted () {
    this.createGraph()
  },
  methods: {
    createGraph () {
      G6.registerNode(
        'circle-animate',
        {
          afterDraw (cfg, group) {
            const shape = group.get('children')[0];
            shape.animate(
              (ratio) => {
                const diff = ratio <= 0.5 ? ratio * 10 : (1 - ratio) * 10;
                return {
                  r: cfg.size / 2 + diff,
                };
              },
              {
                repeat: true,
                duration: 3000,
                easing: 'easeCubic',
              },
            );
          },
        },
        'circle',
      );

      G6.registerNode(
        'background-animate',
        {
          afterDraw (cfg, group) {
            const r = cfg.size / 2;
            const back1 = group.addShape('circle', {
              zIndex: -3,
              attrs: {
                x: 0,
                y: 0,
                r,
                fill: cfg.color,
                opacity: 0.6,
              },
              name: 'back1-shape',
            });
            const back2 = group.addShape('circle', {
              zIndex: -2,
              attrs: {
                x: 0,
                y: 0,
                r,
                fill: cfg.color,
                opacity: 0.6,
              },
              name: 'back2-shape',
            });
            const back3 = group.addShape('circle', {
              zIndex: -1,
              attrs: {
                x: 0,
                y: 0,
                r,
                fill: cfg.color,
                opacity: 0.6,
              },
              name: 'back3-shape',
            });
            group.sort(); // Sort according to the zIndex
            back1.animate(
              {
                // Magnifying and disappearing
                r: r + 10,
                opacity: 0.1,
              },
              {
                duration: 3000,
                easing: 'easeCubic',
                delay: 0,
                repeat: true, // repeat
              },
            ); // no delay
            back2.animate(
              {
                // Magnifying and disappearing
                r: r + 10,
                opacity: 0.1,
              },
              {
                duration: 3000,
                easing: 'easeCubic',
                delay: 1000,
                repeat: true, // repeat
              },
            ); // 1s delay
            back3.animate(
              {
                // Magnifying and disappearing
                r: r + 10,
                opacity: 0.1,
              },
              {
                duration: 3000,
                easing: 'easeCubic',
                delay: 2000,
                repeat: true, // repeat
              },
            ); // 3s delay
          },
        },
        'circle',
      );

      // G6.registerNode('diamond2', {

      // })

      G6.registerEdge(
        'circle-running',
        {
          afterDraw (cfg, group) {
            const shape = group.get('children')[0];
            const startPoint = shape.getPoint(0);

            const circle = group.addShape('circle', {
              attrs: {
                x: startPoint.x,
                y: startPoint.y,
                fill: '#1890ff',
                r: 3,
              },
              name: 'circle-shape',
            });

            circle.animate(
              (ratio) => {
                const tmpPoint = shape.getPoint(ratio);
                return {
                  x: tmpPoint.x,
                  y: tmpPoint.y,
                };
              },
              {
                repeat: true,
                duration: 3000,
              },
            );
          },
        },
        'line',
      );

      const lineDash = [4, 2, 1, 2];
      G6.registerEdge(
        'can-running',
        {
          setState (name, value, item) {
            const shape = item.get('keyShape');
            if (name === 'running') {
              if (value) {
                let index = 0;
                shape.animate(
                  () => {
                    index++;
                    if (index > 9) {
                      index = 0;
                    }
                    const res = {
                      lineDash,
                      lineDashOffset: -index,
                    };
                    // return the params for this frame
                    return res;
                  },
                  {
                    repeat: true,
                    duration: 3000,
                  },
                );
              } else {
                shape.stopAnimate();
                shape.attr('lineDash', null);
              }
            }
          },
        },
        'cubic-horizontal',
      );

      const initData = {
        // 点集
        nodes: [
          {
            id: 'node1',
            x: 100,
            y: 200,
            label: '起始点',
          },
          {
            id: 'node2',
            x: 300,
            y: 200,
            label: '目标点',
          },
          {
            id: 'node3',
            type: 'circle-animate',
            x: 400,
            y: 200,
            size: 20,
            label: '点3',
          },
          {
            id: 'node4',
            type: 'background-animate',
            x: 500,
            y: 200,
            size: 20,
            color: '#40a9ff',
            label: '点4',
          },
        ],
        // 边集
        edges: [
          {
            source: 'node1',
            target: 'node2',
            label: '我是连线',
          },
          {
            source: 'node2',
            target: 'node3',
            type: 'circle-running',
            style: {
              stroke: '#0099CC',
              lineWidth: 3,
              endArrow: true,
            },
          },
          {
            source: 'node3',
            target: 'node4',
            type: 'can-running',
            style: {
              stroke: '#0099CC',
              lineWidth: 3,
              endArrow: true,
            },
          },
        ],
      };

      const graph = new G6.Graph({
        container: 'mountNode',
        width: 800,
        height: 500
      });
      graph.data(initData);
      graph.render();

      graph.on('node:mouseenter', (ev) => {
        const node = ev.item;
        const edges = node.getEdges();
        edges.forEach((edge) => graph.setItemState(edge, 'running', true));
      });
      graph.on('node:mouseleave', (ev) => {
        const node = ev.item;
        const edges = node.getEdges();
        edges.forEach((edge) => graph.setItemState(edge, 'running', false));
      });
      graph.on('edge:mouseenter', (ev) => {
        const node = ev.item;
        graph.setItemState(node, 'running', true)
      });
      graph.on('edge:mouseleave', (ev) => {
        const node = ev.item;
        graph.setItemState(node, 'running', false)
      });
    }
  }
}
</script>